<script setup>
import tabBar from "../../pages/comment/tabBar.vue"
const applicationRecords=[
  {
    name:"张三",
    id:"123456789",
    time:"2025-9-12-15:00:00",
    major:"软件工程",
    status:"申请中",
    to:"/teacher/demo/hechaziliao"

  },
  {
    name:"李四",
    id:"2415645693",
    time:"2025-9-12-10:00:00",
    major:"生物工程",
    status:"申请中",
    to:"/teacher/demo/hechaziliao2"

  }
];
const toNext=(to)=>{
  uni.navigateTo({
    url:to
  })
}
</script>

<template>
  <view class="main">
     <view class="bj">
      <text class="tip">
        <image class="img" src="/static/image/tip.png"></image>
      当前2个自愿返乡申请待审批
      </text>
   </view>
<!--     申请记录列表-->
<view class="record-list">
<!--  循环申请记录，遍历applicationRecords-->
  <view class="record-item" v-for="(item,index) in applicationRecords" :key="index">
<!--    姓名 学号-->
    <view class="item-header">
      <text claass="item-name">{{item.name}}</text>
      <text claass="item-id">{{item.id}}</text>
    </view>
<!--    申请时间-->
    <view class="item-apply-time">申请时间：{{item.time}}</view>
<!--    专业-->
  <view class="item-major">{{item.major}}</view>
    <view class="item-footer">
      <view class="item-avatar">头像</view>
      <text class="item-status">{{item.status}}</text>
      <view class="item-action" @click="toNext(item.to)">
        请仔细核查填写资料
        <text class="arrow"> ></text>
      </view>
    </view>
  </view>
</view>
    <tabBar :cur-index="1"></tabBar>
  </view>
</template>

<style scoped>
.main{
  height: 100%;
  width: 100%;
  background-color:rgba(239, 239, 244, 1);
}
/*文本背景*/
.bj{
  width: 100%;
  height: 28px;
  background: #DEE9FF;
  padding: 8px;
}

/*文本样式*/
.tip{
  font-weight: 400;
  font-size: 12px;

  letter-spacing: 0;/*字体间距*/
  display: flex;
  align-items: center;
}
/*图片样式*/
.img{
  width: 16px;
  height: 16px;
  top:3px;
}
/*申请记录列表*/
.record-list{
  margin: 0 0px;
}
/*单条申请记录*/
.record-item {

  height: 170px;
  background-color: white;
padding: 15px;
  margin: 10px;

}
.item-header {
  display: flex;
  justify-content: space-between;
  margin: 8px;
}
.item-name{
  font-weight: bold;
  font-size: 16px;
}
.item-id {
  color: #999;
  font-size: 14px;
}
.item-apply-time{
  color: orange;
  font-size: 14px;
  margin: 8px;
}
.item-major{
  margin: 8px;
  color: #999;
  font-size: 14px;
}
.item-footer {
  display: flex;
  align-items: center;
}
.item-avatar {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 50%; /* 圆形头像 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  font-size: 12px;
}
.item-status {
  color: green;
  margin-right: 10px;
}
.item-action {
  color: #999;
  font-size: 14px;
  display:flex;
  align-items: center;
}
.arrow{
  margin-left: 5px;
  font-size: 16px;
}
</style>